<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/myblog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="TakCode Blog">
  <meta name="author" content="谢芃">
  <meta name="keywords" content="">
  <title>page.title - TakCode</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/myblog/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/myblog/">&nbsp;<strong>TakCode</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/about/">关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/myblog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      <div class="container nopadding-md">
        <div class="py-5 z-depth-3" id="board"
          >
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                

<div class="page-content">
  <h1 id="Node-js-Vue-js-实现王者荣耀手机端官网和管理后台"><a href="#Node-js-Vue-js-实现王者荣耀手机端官网和管理后台" class="headerlink" title="Node.js + Vue.js 实现王者荣耀手机端官网和管理后台"></a>Node.js + Vue.js 实现王者荣耀手机端官网和管理后台</h1><p>移动端 <a href="http://king.helloxx.cn" target="_blank" rel="noopener">http://king.helloxx.cn</a></p>
<p>管理后台 <a href="http://king.helloxx.cn/admin" target="_blank" rel="noopener">http://king.helloxx.cn/admin</a></p>
<h2 id="一、-技术栈简介"><a href="#一、-技术栈简介" class="headerlink" title="一、 技术栈简介"></a>一、 技术栈简介</h2><p>前端：</p>
<p>前端部分是用Vue-CLI来自动构建。</p>
<p><code>Vue v2.6</code> 全家桶(Vue, Vue-router )： 用于构建用户界面的 MVVM 框架 </p>
<p><code>vue-awesome-swiper</code> ：轮播图组件库</p>
<p><code>axios</code>: 用来请求后端api的数据 </p>
<p>后端：</p>
<p><code>Experss v5.0</code>：基于Node.js的Web开发框架</p>
<p><code>MongoDB v4.0</code>： 基于分布式文件存储的开源数据库系统</p>
<p><code>mongoose</code>：可以操作MongDB的一个对象模型库</p>
<p><code>bcryptjs</code>：一个第三方密码加密库</p>
<p><code>jsonwebtoken</code>：生成<code>tokenid</code></p>
<h2 id="二、-管理后台"><a href="#二、-管理后台" class="headerlink" title="二、 管理后台"></a>二、 管理后台</h2><ol>
<li><p>基于Element UI的后台管理基础界面搭建</p>
</li>
<li><p>创建分类</p>
</li>
<li><p>分类列表</p>
</li>
<li><p>修改分类</p>
</li>
<li><p>删除分类</p>
</li>
<li><p>子分类</p>
</li>
<li><p><strong>通用 CRUD 接口</strong></p>
</li>
<li><p>装备管理</p>
</li>
<li><p>图片上传 (multer)</p>
</li>
<li><p>英雄管理</p>
</li>
<li><p>编辑英雄 (关联,多选,el-select, multiple)</p>
</li>
<li><p>技能编辑</p>
</li>
<li><p>文章管理</p>
</li>
<li><p>富文本编辑器 (quill)</p>
</li>
<li><p>首页广告管理</p>
</li>
<li><p>管理员账号管理 (bcrypt)</p>
</li>
<li><p>登录页面</p>
</li>
<li><p>登录接口 (jwt,jsonwebtoken)</p>
</li>
<li><p>服务端登录校验</p>
</li>
<li><p>客户端路由限制 (beforeEach, meta)</p>
</li>
<li><p>上传文件的登录校验 (el-upload, headers)</p>
</li>
</ol>
<h2 id="三、移动端网站"><a href="#三、移动端网站" class="headerlink" title="三、移动端网站"></a>三、移动端网站</h2><ol>
<li>“工具样式”概念和 SASS (SCSS)</li>
<li>样式重置</li>
<li>网站色彩和字体定义 (colors, text)</li>
<li>通用flex布局样式定义 (flex)</li>
<li>常用边距定义 (margin, padding)</li>
<li>主页框架和顶部菜单</li>
<li>首页顶部轮播图片 (vue swiper)</li>
<li>使用精灵图片 (sprite)</li>
<li>使用字体图标 (iconfont)</li>
<li>卡片组件 (card)</li>
<li>列表卡片组件 (list-card, nav, swiper)</li>
<li>首页新闻资讯-数据录入(+后台bug修复)</li>
<li>首页新闻资讯-数据接口</li>
<li>首页新闻资讯-界面展示</li>
<li>首页英雄列表-提取官网数据</li>
<li>首页英雄列表-录入数据</li>
<li>首页英雄列表-界面展示</li>
<li>新闻详情页</li>
<li>新闻详情页-完善</li>
<li>英雄详情页-1-前端准备</li>
<li>英雄详情页-2-后台编辑</li>
<li>英雄详情页-3-前端顶部</li>
<li>英雄详情页-4-完善</li>
</ol>
<h2 id="四、发布和部署"><a href="#四、发布和部署" class="headerlink" title="四、发布和部署"></a>四、发布和部署</h2><ol>
<li>生产环境编译</li>
<li>购买域名和服务器</li>
<li>域名解析</li>
<li>Nginx 安装和配置</li>
<li>MongoDB数据库的安装和配置</li>
<li>git 安装、配置ssh-key</li>
<li>Node.js 安装、配置淘宝镜像</li>
<li>拉取代码，安装pm2并启动项目</li>
<li>配置 Nginx 的反向代理</li>
<li>迁移本地数据到服务器 (mongodump)</li>
</ol>
<h2 id="五、进阶"><a href="#五、进阶" class="headerlink" title="五、进阶"></a>五、进阶</h2><ol>
<li>使用免费SSL证书启用HTTPS安全连接</li>
<li>使用阿里云OSS云存储存放上传文件</li>
</ol>

</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/myblog/js/main.js" ></script>


  <script  src="/myblog/js/lazyload.js" ></script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/myblog/js/clipboard-use.js" ></script>








<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "page.title&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/myblog/js/local-search.js" ></script>
  <script>
    var path = "/myblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>












</body>
</html>
